<template>
	<BasicDrawer v-bind="$attrs" @register="registerDrawer" width="80%" showFooter destroyOnClose title="编辑检测信息"
		:width="900" @ok="handleSubmit">
		<!-- 报名用户信息 -->
		<BasicForm @register="registerForm">

			<template #selectStyle="{ model, field }">
				<a-row>
					<!-- 日程管理：这里显示表格 -->

					<a-button type="primary" @click="handleAdd(1)" preIcon="ant-design:plus-outlined"> 新增</a-button>
					<div style="overflow:auto;width:100%">
						<BasicTable style="white-space:nowrap" @edit-end="handleEditEnd" @edit-cancel="handleEditCancel"
							@register="register" :beforeEditSubmit="beforeEditSubmit" :columns="styleColumns"
							:dataSource="styles" :pagination="false">
							<template #action="{ record }"><!-- :dropDownActions="getDropDownAction(record)"  -->
								<TableAction :actions="operationActionsUsers(record)" />
							</template>
						</BasicTable>
					</div>
				</a-row>
			</template>
			<template #ScheduleSelection="{ model, field }">
				<a-row>
					<!-- 日程管理：这里显示表格 -->

					<a-button type="primary" @click="handleAdd(2)" preIcon="ant-design:plus-outlined"> 新增</a-button>
					<div style="overflow:auto;width:100%">
						<BasicTable style="white-space:nowrap" @edit-end="handleEditEnd" @edit-cancel="handleEditCancel"
							@register="register" :beforeEditSubmit="beforeEditSubmit" :columns="pdtColumns"
							:dataSource="pdts" :pagination="false">
							<template #action="{ record }"><!-- :dropDownActions="getDropDownAction(record)"  -->
								<TableAction :actions="operationActionsUsers(record)" />
							</template>
						</BasicTable>
					</div>
				</a-row>
			</template>
			<template #TieredPrice="{ model, field }">
				<a-row>
					<a-button type="primary" @click="handleAdd(3)" preIcon="ant-design:plus-outlined"> 新增</a-button>
					<div style="overflow:auto;width:100%">
						<a-table style="white-space:nowrap" :columns="travelColumns" :dataSource="travels"
							:pagination="false">
							<template #action="{ record }"><!-- :dropDownActions="getDropDownAction(record)"  -->
								<TableAction :actions="operationActionsUsers(record)" />
							</template>
						</a-table>
					</div>
				</a-row>
			</template>
		</BasicForm>
		<a-row v-for="item in styles">
			<a-button type="primary" @click="handleAdd(3)" preIcon="ant-design:plus-outlined"> {{item.title}}</a-button>
			<a-button type="primary" @click="handleAdd(3)" preIcon="ant-design:plus-outlined"> 新增</a-button>
			<div style="overflow:auto;width:100%">
				<a-table style="white-space:nowrap" :columns="travelColumns" :dataSource="travels" :pagination="false">
					<template #action="{ record }"><!-- :dropDownActions="getDropDownAction(record)"  -->
						<TableAction :actions="operationActionsUsers(record)" />
					</template>
				</a-table>
			</div>
		</a-row>
	</BasicDrawer>
</template>

<script lang="ts" setup>
	import { ref, computed, unref, watchEffect, toRaw } from 'vue';
	import { useUserStoreWithOut } from '/@/store/modules/user';
	import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
	import { BasicForm, useForm } from '/@/components/Form/index';
	import { BasicTable, useTable, TableAction, BasicColumn } from '/@/components/Table/index';
	import { formSchema, pdtColumns, travelColumns, styleColumns } from '../BsCityHomeStyle.data';
	import { render, formattingMin, formattingDay } from '/@/utils/common/renderUtils';
	import { useMessage } from '/@/hooks/web/useMessage';
	// import { editOrderSite } from './index.api';
	// Emits声明
	const emit = defineEmits(['register', 'submit', 'entryType']);
	const isUpdate = ref(true);
	const pdts = ref([] as Array<any>)
	const travels = ref([] as Array<any>)
	const styles = ref([] as Array<any>)

	const userInfo = computed(() => {
		const userStore = useUserStoreWithOut();
		return userStore.getUserInfo;
	});

	//表单配置
	const [registerForm, { setProps, resetFields, setFieldsValue, getFieldsValue, validate }] = useForm({
		//labelWidth: 150,
		schemas: formSchema,
		showActionButtonGroup: false,
		baseColProps: { span: 24 },
		labelWidth: 120
	});
	//表单赋值
	const [registerDrawer, { closeDrawer, setDrawerProps }] = useDrawerInner(async (data) => {
		//重置表单
		await resetFields();
		setDrawerProps({
			confirmLoading: false,
			showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter,
			// canFullscreen: false
		});
		// 	//表单赋值
		await setFieldsValue({
			...data.record,
		});
		setProps({ disabled: !data?.showFooter })
	});

	function handleEditEnd({ record, index, key, value } : Recordable) {
		console.log(record, index, key, value);
		return false;
	}
	const { createMessage } = useMessage();
	// 模拟将指定数据保存
	function feakSave({ value, key, id }) {
		/* 	createMessage.loading({
				content: `正在模拟保存${key}`,
				key: '_save_fake_data',
				duration: 0,
			}); */
			for (var i = 0; i < styles.value.length; i++) {
				console.log(value,key,id)
			}
			
		return new Promise((resolve) => {
			if (value === '') {
				createMessage.error({
					content: '保存失败：不能为空',
					key: '_save_fake_data',
					duration: 2,
				});
				resolve(false);
			} else {
				/* 	createMessage.success({
						content: `记录${id}的${key}已保存`,
						key: '_save_fake_data',
						duration: 2,
					}); */
				resolve(true);
			}
		});
	}

	async function beforeEditSubmit({ record, index, key, value }) {
		console.log('单元格数据正在准备提交', { record, index, key, value });
		return await feakSave({ id: record.id, key, value });
	}

	function handleEditCancel() {
		console.log('cancel');
	}

	const [register, { setTableData }] = useTable();
	function handleAdd(i) {

		if (i == 1) {
			console.log(styles.value)
			let a = { sort: styles.value.length, msg: '说明', title: '标题', showstyle: 'festival' };
			styles.value.push(a)
			setTableData(styles.value)
			console.log(styles.value)


		} else if (i == 2) {

		} else if (i == 3) {

		}
	}

	//设置标题
	// const title = computed(() => (!unref(isUpdate) ? '编辑检测信息' : '编辑'));
	//表单提交事件
	async function handleSubmit(v) {
		try {
			let values = await validate();
			console.log(values)
			setDrawerProps({ confirmLoading: true });
			// // //提交表单
			// await editOrderSite(values);
			//刷新列表
			emit('submit', { values, sid: parentSid.value });
		} finally {
			setDrawerProps({ confirmLoading: false });
		}
	}
</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
	:deep(.ant-input-number) {
		width: 100%
	}

	:deep(.ant-calendar-picker) {
		width: 100%
	}

	.margin-l-th {
		margin-left: 10px;
	}

	.colorRed {
		color: red;
	}

	.title {
		font-weight: 500;
	}

	h3 {
		font-weight: 700;
	}
</style>